<script setup>
import { computed } from "vue";
import {
  TrendCharts,
  UserFilled,
  Money,
  Switch,
  Coin,
  CreditCard,
  TakeawayBox,
  Histogram,
  HelpFilled,
  StarFilled,
} from "@element-plus/icons-vue";
import { ElCard, ElRow, ElCol, ElIcon, ElTag } from "element-plus";

const props = defineProps({
  statsData: {
    type: Object,
    required: true,
    default: () => ({}),
  },
  loading: {
    type: Boolean,
    default: false,
  },
});

const formatCurrency = (value) => {
  const num = Number(value);
  if (isNaN(num) || num === 0) return "0.00";
  return num.toFixed(2);
};

const formatRatio = (value) => {
  const num = Number(value);
  if (isNaN(num) || num === 0) return "0.00%";
  return (num * 100).toFixed(2) + "%";
};

const getRatioTagType = (ratio) => {
  if (ratio > 0.5) return "danger";
  return "info";
};

const getRatioTagText = (ratio) => {
  if (ratio > 0.5) return "偏高";
  return "正常";
};

// 食堂总营业额
const totalNonRoomSales = computed(() => {
  return Number(props.statsData.total_non_room_sales || 0);
});

// 食堂食材成本汇总
const totalNonRoomFoodCost = computed(() => {
  return Number(props.statsData.total_non_room_food_cost || 0);
});

// 食堂成本占比
const nonRoomCostRatio = computed(() => {
  return Number(props.statsData.non_room_cost_ratio || 0);
});

// 总就餐人次
const totalDinerCount = computed(() => {
  return (Number(props.statsData.total_diner_count) || 0).toLocaleString();
});

// 挂账总数
const totalTicketSales = computed(() => {
  return Number(props.statsData.total_ticket_sales || 0);
});

// 人均客单价
const averagePricePerDiner = computed(() => {
  return Number(props.statsData.avg_price_per_diner || 0);
});

// 包间营业额
const totalRoomSales = computed(() => {
  return Number(props.statsData.total_room_sales || 0);
});

// 包间食材成本
const totalRoomFoodCost = computed(() => {
  return Number(props.statsData.total_room_food_cost || 0);
});

// 包间食材成本占比
const roomCostRatio = computed(() => {
  return Number(props.statsData.room_cost_ratio || 0);
});
</script>

<template>
  <div class="card-header">
    <h3>
      <el-icon><TrendCharts /></el-icon> 统计汇总概览
    </h3>
    <span class="date-range-info">
      数据基于当前筛选结果 (共 {{ props.statsData.total_log_count }} 条记录)
    </span>
  </div>

  <div class="stats-content">
    <el-row :gutter="20" class="stat-row">
      <el-col :span="2">
        <div class="stat-item primary-border">
          <el-icon class="stat-icon"><UserFilled /></el-icon>
          <span class="stat-label">就餐人次</span>
          <span class="stat-value">{{ totalDinerCount }} 人</span>
        </div>
      </el-col>
      <el-col :span="2">
        <div class="stat-item danger-border">
          <el-icon class="stat-icon"><CreditCard /></el-icon>
          <span class="stat-label">挂账总额</span>
          <span class="stat-value"
            >¥{{ formatCurrency(totalTicketSales) }}</span
          >
        </div>
      </el-col>
      <el-col :span="2">
        <div class="stat-item success-border">
          <el-icon class="stat-icon"><Coin /></el-icon>
          <span class="stat-label">人均客单价</span>
          <span class="stat-value"
            >¥{{ formatCurrency(averagePricePerDiner) }}</span
          >
        </div>
      </el-col>
      <el-col :span="3">
        <div class="stat-item primary-border">
          <el-icon class="stat-icon"><Money /></el-icon>
          <span class="stat-label">食堂总营业额</span>
          <span class="stat-value"
            >¥{{ formatCurrency(totalNonRoomSales) }}</span
          >
        </div>
      </el-col>
      <el-col :span="3">
        <div class="stat-item info-border">
          <el-icon class="stat-icon"><Histogram /></el-icon>
          <span class="stat-label">食材成本汇总</span>
          <span class="stat-value"
            >¥{{ formatCurrency(totalNonRoomFoodCost) }}</span
          >
        </div>
      </el-col>
      <el-col :span="3">
        <div class="stat-item warning-border">
          <el-icon class="stat-icon"><Switch /></el-icon>
          <span class="stat-label">食材成本占比</span>
          <div class="stat-value-with-tag">
            <span class="stat-value-small"
              >{{ formatRatio(nonRoomCostRatio)
              }}<el-tag :type="getRatioTagType(nonRoomCostRatio)" size="small"
                >{{ getRatioTagText(nonRoomCostRatio) }}
              </el-tag></span
            >
          </div>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="stat-item primary-border-alt">
          <el-icon class="stat-icon"><StarFilled /></el-icon>
          <span class="stat-label">包间营业额</span>
          <span class="stat-value">¥{{ formatCurrency(totalRoomSales) }}</span>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="stat-item info-border-alt">
          <el-icon class="stat-icon"><TakeawayBox /></el-icon>
          <span class="stat-label">包间食材成本</span>
          <span class="stat-value"
            >¥{{ formatCurrency(totalRoomFoodCost) }}</span
          >
        </div>
      </el-col>
      <el-col :span="3">
        <div class="stat-item warning-border-alt">
          <el-icon class="stat-icon"><HelpFilled /></el-icon>
          <span class="stat-label">包间食材成本占比</span>
          <div class="stat-value-with-tag">
            <span class="stat-value-small"
              >{{ formatRatio(roomCostRatio)
              }}<el-tag :type="getRatioTagType(roomCostRatio)" size="small">
                {{ getRatioTagText(roomCostRatio) }}
              </el-tag></span
            >
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped lang="less">
@primary-color: #409eff;
@success-color: #67c23a;
@info-color: #909399;
@warning-color: #e6a23c;
@danger-color: #f56c6c;

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  border-bottom: 1px dashed #e0e0e0;

  h3 {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 600;
    color: #333;

    .el-icon {
      margin-right: 8px;
      font-size: 18px;
      color: @primary-color;
    }
  }
  .date-range-info {
    font-size: 13px;
    color: #8c8c8c;
  }
}

.stats-content {
  margin-bottom: 18px;
  padding: 0;
}

.stat-row {
  margin-bottom: 0 !important;
  flex-wrap: nowrap;

  .el-col {
    padding-bottom: 0 !important;
  }
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 10px 5px;
  background-color: #f7f9fb;
  border-radius: 6px;
  border-left: 5px solid transparent;
  height: 100px;
  justify-content: center;
  transition: transform 0.2s, box-shadow 0.2s;
  box-sizing: border-box;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  }
}

.stat-icon {
  font-size: 28px;
  color: @primary-color;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 13px;
  font-weight: 600;
  color: #8c8c8c;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.stat-value {
  font-size: 16px;
  font-weight: 700;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.stat-value-small {
  font-size: 16px;
  font-weight: 700;
  color: #333;
  .el-tag {
    margin-left: 5px;
  }
}

.primary-border {
  border-left-color: @primary-color;
}
.success-border {
  border-left-color: @success-color;
}
.info-border {
  border-left-color: @info-color;
}
.warning-border {
  border-left-color: @warning-color;
}
.danger-border {
  border-left-color: @danger-color;
}

.primary-border-alt {
  border-left-color: darken(@primary-color, 15%);
}
.info-border-alt {
  border-left-color: darken(@info-color, 15%);
}
.warning-border-alt {
  border-left-color: darken(@warning-color, 15%);
}
</style>
